<template>
  <view class="wrapper">
    <view class="top">
      <view class="top-title">可提现金额（元）</view>
      <view class="top-amount">
        <u-input type="digit" v-model="amount" placeholder="0.00" placeholderClass="placeholderStyle" border="none" fontSize="60rpx" color="#000"></u-input>
      </view>
      <view class="top-line" />
      <view class="top-text">
        最多提现¥{{ withdrawableAmount }}，
        <text @click="withdrawAll">全部提现</text>
      </view>
      <view class="top-account" v-if="type === 'rentWithdrawal'" @click="bankCardsPopupOpen">
        <view class="top-account-left">提现至</view>
        <view class="top-account-right">
          <span v-if="accounInfo.account">{{ accounInfo.account }}/{{ accounInfo.bank_name }}</span>
          <span v-else>选择提现账户</span>
          <u-icon name="arrow-right" color="#333333" size="24rpx"></u-icon>
        </view>
      </view>
      <view class="top-account top-account_" v-if="type === 'commission'">
        <view class="top-account-left">提现至支付宝账户</view>
        <view class="top-account_-inputBox">
          <u-input
              placeholder="请输入支付宝账户名称"
              border="none"
              placeholderClass="placeholderCodeClass"
              color="#333"
              fontSize="26rpx"
              v-model="accounInfo.name"
          ></u-input>
        </view>
        <view class="top-account_-inputBox">
          <u-input
              placeholder="请输入支付宝账户"
              border="none"
              placeholderClass="placeholderCodeClass"
              color="#333"
              fontSize="26rpx"
              v-model="accounInfo.account"
          ></u-input>
        </view>
      </view>
      <!-- 			<view class="top-phone">18547852365</view>
      <view class="top-code">
        <u-input placeholder="请输入短信验证码" border="none" placeholderClass="placeholderCodeClass" color="#333" fontSize="26rpx" v-model="code">
          <view class="suffix" slot="suffix">
            <u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
            <u-text @tap="getCode" :text="tips" color="#FF4603" size="26rpx"></u-text>
          </view>
        </u-input>
      </view> -->
      <view class="top-btn" @click="$u.debounce(handleWithdraw, 600)">确认提现</view>
    </view>
    <view class="main">
      <view class="main-title">提现记录</view>
      <view class="main-content">
        <p>1. 提现申请提交后24-48小时内审核到账，周末正常受理；若 遇周末系统维护，将顺延至首个工作日处理，到账以银行为准。</p>
        <p>2. 国家法定节假日期间，因银行及支付渠道限制，提现处理顺 延至节后工作日，请关注公司假期公告。</p>
        <p>3. 若因银行/支付渠道限额、系统维护升级等，提现将延后至 恢复正常后处理。</p>
        <p>
          4. 如有其他疑问，可联系
          <text style="color: #ff4603">“在线客服”</text>
          咨询获取帮助。
        </p>
      </view>
    </view>
    <u-popup :show="bankCardsShow" closeable @close="bankCardsPopupClose" @open="bankCardsPopupOpen">
      <view class="bank-list">
        <!-- 银行卡列表 -->
        <view class="bank-card" v-for="(card, index) in bankCards" :key="card.id" @click="handleSelectCard(card)">
          <view class="bank-icon">
            <text class="bank-short-name">{{ getBankShortName(card.bank_name) }}</text>
          </view>
          <view class="bank-info">
            <view class="bank-name">{{ card.bank_name }}卡({{ card.bank_card.slice(-4) }})</view>
            <view class="add-time">
              {{ card.createtime }}
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { purse } from '@/api';
import { bankCard } from '@/api';
export default {
  data() {
    return {
      bankCardsShow: false,
      type: null, //区分租金提现还是佣金提现  commission佣金  rentWithdrawal租金
      withdrawableAmount: 0, //可提现的总金额
      amount: '', //金额
      // 账户信息
      accounInfo: {
        name: '', //姓名
        bank_name: '', //开户行
        account: '' //账号
      },
      bankCards: []
      // tips: '',
      // seconds: 60,
      // code: '',
    };
  },
  async onLoad(options) {
    this.type = options.type;
    await this.getWithdrawableAmount();
    this.getBankCardsList();
  },
  methods: {
    handleSelectCard(item) {
      this.accounInfo.name = item.name;
      this.accounInfo.bank_name = item.bank_name;
      this.accounInfo.account = item.bank_card;
      console.log(this.accounInfo);
      this.bankCardsPopupClose();
    },
    getBankShortName(name) {
      if (!name) return '';
      return name.length > 2 ? name.substring(0, 1) : name;
    },
    bankCardsPopupClose() {
      this.bankCardsShow = false;
    },
    bankCardsPopupOpen() {
      this.bankCardsShow = true;
    },
    async getBankCardsList() {
      const res = await bankCard.bankList();
      this.bankCards = res.data || [];
    },
    async handleWithdraw() {
      if (!this.amount) {
        uni.showToast({
          icon: 'none',
          title: '请输入提现金额'
        });
        return;
      }
      if (Number(this.amount) <= 0) {
        uni.showToast({
          icon: 'none',
          title: '提现金额不能为0'
        });
        return;
      }
      if (Number(this.amount) > Number(this.withdrawableAmount)) {
        uni.showToast({
          icon: 'none',
          title: '超出最大提现金额'
        });
        return;
      }
      let res;
      if (this.type === 'rentWithdrawal') {
        if (!this.accounInfo.name || !this.accounInfo.bank_name || !this.accounInfo.account) {
          uni.showToast({
            icon: 'none',
            title: '请先选择提现账户'
          });
          return;
        }
        res = await purse.rentWithdrawal({
          amount: this.amount,
          ...this.accounInfo,
          type: 1
        });
      }
      if (this.type === 'commission') {
        if (!this.accounInfo.name) {
          uni.showToast({
            icon: 'none',
            title: '请输入支付宝账户名称'
          });
          return;
        }
        if (!this.accounInfo.account) {
          uni.showToast({
            icon: 'none',
            title: '请输入支付宝账户'
          });
          return;
        }
        res = await purse.commissionWithdrawal({
          amount: this.amount,
          ...this.accounInfo,
          type: 2
        });
      }
      uni.showToast({
        icon: 'none',
        title: res.msg
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1200);
    },
    // 全部提现
    withdrawAll() {
      this.amount = this.withdrawableAmount;
    },
    // 获取可提现的总金额
    async getWithdrawableAmount() {
      if (this.type === 'rentWithdrawal') {
        const res = await purse.rentWallet();
        this.withdrawableAmount = res.data.rent_balance || 0;
      }
      if (this.type === 'commission') {
        const res = await purse.commissionWallet();
        this.withdrawableAmount = res.data.commission_balance || 0;
      }
    },
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        });
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.$u.toast('验证码已发送');
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        uni.$u.toast('倒计时结束后再发送');
      }
    },
    end() {
      uni.$u.toast('倒计时结束');
    },
    start() {
      uni.$u.toast('倒计时开始');
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 30rpx;
}
.top {
  padding: 30rpx;
  background: #ffffff;
  border-radius: 14rpx;
  &-title {
    font-family: 'PingFang SC';
    font-weight: 500;
    font-size: 30rpx;
    color: #333333;
    margin-bottom: 70rpx;
  }
  ::v-deep .placeholderStyle {
    font-family: 'PingFang SC';
    font-weight: 500;
    font-size: 60rpx;
    color: #d9d7d7;
  }
  ::v-deep .u-input__content__field-wrapper__field {
    height: auto;
    line-height: normal;
  }
  &-line {
    height: 2rpx;
    background: #f5f5f5;
    border-radius: 1rpx;
    margin: 20rpx 0;
    // opacity: 0.6;
  }
  &-text {
    font-family: 'PingFang SC';
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
    text {
      color: #ff4603;
    }
  }
  &-account {
    margin-top: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-left {
      font-family: 'PingFang SC';
      font-weight: 500;
      font-size: 26rpx;
      color: #333333;
    }
    &-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
    }
  }
  &-account_ {
    display: block;
    margin-top: 50rpx;
    &-inputBox {
      margin-top: 40rpx;
    }
  }
  &-phone {
    font-family: 'PingFang SC';
    font-weight: 500;
    font-size: 26rpx;
    color: #333333;
    margin: 43rpx 0;
    ::v-deep .placeholderCodeClass {
      font-family: ' PingFang SC';
      font-weight: 400;
      font-size: 26rpx;
      color: #999999;
    }
  }
  &-btn {
    width: 580rpx;
    height: 89rpx;
    background: #ff4400;
    border-radius: 44rpx 44rpx 45rpx 45rpx;
    margin: 60rpx auto 10rpx auto;
    line-height: 89rpx;
    text-align: center;
    font-family: 'PingFang SC';
    font-weight: bold;
    font-size: 30rpx;
    color: #ffffff;
  }
}
.main {
  margin-top: 20rpx;
  background: #ffffff;
  border-radius: 14rpx;
  padding: 30rpx 0rpx 100rpx 0rpx;
  &-title {
    padding: 0 30rpx;
    font-family: 'PingFang SC';
    font-weight: 500;
    font-size: 32rpx;
    color: #333333;
    margin-bottom: 10rpx;
  }
  &-content {
    padding: 0 20rpx 20rpx;
    font-family: 'Source Han Sans CN';
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
    p {
      padding: 20rpx 0;
    }
  }
}

.bank-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  padding: 20rpx 0;
}

.bank-card,
.add-card {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 14rpx;
  padding: 40rpx 38rpx;
}

.bank-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #ff5a5f;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 30rpx;

  .bank-short-name {
    color: #ffffff;
    font-size: 32rpx;
    font-weight: bold;
  }
}

.bank-info {
  flex: 1;

  .bank-name {
    font-weight: 500;
    font-size: 30rpx;
    color: #2c2e2e;
    margin-bottom: 24rpx;
  }

  .add-time {
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
  }
}
</style>
